<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    

    
    <input type="file" name="" id="" />
    <script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
    <script>
        const inp = document.querySelector('input');
        inp.onchange=async (e)=>{
            const file = inp.files[0]
            if(!file){
                return ;
            }
            // 0-99
            const piece = file.slice(0,100)
            const chunks = createChunks(file,10*1024*1024);
            console.log(piece);
            // web worker
            const md5Hash = await hash(chunks);
        }
        function hash(chunks){
            return new Promise(resolve=>{
                const spark = new SparkMD5();
                function _read(i){
                    if(i>=chunks.length){
                        resolve(spark.end());
                        return;
                    }
                    const blob = chunks[i];
                    const reader = new FileReader();
                    reader.onload=e=>{
                        const bytes = e.target.result //读取到的字节数
                        spark.append(bytes);
                        _read(i+1)
                    }
                    reader.readAsArrayBuffer(blob);
                };
                _read(0)
            })
        }
        function createChunks(file,chunkSize){
            const result = [];
            for(let i=0;i<file.size;i+=chunkSize){
                result.push(file.slice(i,i+chunkSize));
            }
            return result;
        }
    </script>
  </body>
</html>
